<template>
	<s-layout title="申请退款">
		<view class="tips ss-p-l-24">退款说明：金额会退到原支付账号，预计1-3个工作日到账</view>
		<view class="goods-box ss-p-x-24 ss-m-t-20 ss-p-30">
			<view class="goods ss-flex">
				<image class="goods-logo ss-m-r-20" src="" mode=""></image>
				<view class="goods-details">
					<view class="details-t ss-flex justify-between align-center">
						<view>剪指甲</view>
						<view style="font-size: 24rpx;color: #797979;">￥16</view>
					</view>
					<view class="details-c ss-flex justify-end align-center ss-m-t-5">
						<view class="num">x1</view>
					</view>
					<view class="go-info ss-flex justify-end align-center">
						<view class="go-text" style="color: #2A2A2A;">实付 ￥16</view>
						<uni-icons type="right" size="16" color="#B2B2B2"></uni-icons>
					</view>
				</view>
			</view>
			<view class="refund-num ss-flex justify-between align-center ss-m-t-25">
				<view class="left">退款数量<text>(上限1张)</text></view>
				<view class="ss-flex justify-center align-center">
					<image class="num-image"
						src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-down.png"
						mode=""></image>
					<view class="num">1</view>
					<image class="num-image"
						src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-up.png" mode="">
					</image>
				</view>
			</view>
			<view class="refund-money ss-m-t-30">
				<view>退款金额：<text>￥9.9</text></view>
			</view>
		</view>
		<view class="reason ss-m-t-20 ss-p-x-24">
			<view class="reason-title ss-flex justify-between align-center">
				<view class="title">*退款原因：</view>
				<view class="go-info ss-flex justify-end align-center ss-m-t-10">
					<view class="go-text" style="color: #2A2A2A;">请选择</view>
					<uni-icons type="right" size="16" color="#B2B2B2"></uni-icons>
				</view>
			</view>
			<!-- <view class="reason-list ss-flex flex-wrap ss-p-y-20">
				<view class="reason-item ss-p-x-24">商家无法核销订单</view>
				<view class="reason-item ss-p-x-24">商家无法核销订单</view>
				<view class="reason-item ss-p-x-24">商家无法核销订单</view>
				<view class="reason-item ss-p-x-24">商家无法核销订单</view>
			</view> -->
			<view class="textarea">
				<textarea placeholder="请填写，其它退款原因" placeholder-style="color:#CBCBCB;" maxlength="30" />
				<view class="length">0/30</view>
			</view>
		</view>
		<view class="refund-tip ss-flex ss-m-t-30 ss-p-l-24">
			<uni-icons type="info-filled" size="20" color="#7D7D7D"></uni-icons>
			<view class="ss-m-l-10">退款申请一经提交后不可撤回</view>
		</view>
		<view class="refund-btn">申请退款</view>

		<reasonList></reasonList>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import reasonList from './components/reason-list.vue'
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.tips {
		width: 100%;
		height: 84rpx;
		background: #FFF7DE;
		font-weight: 400;
		font-size: 24rpx;
		color: #D5A30D;
		line-height: 84rpx;
	}

	.goods-box {
		background-color: #fff;

		.goods {
			.goods-logo {
				width: 120rpx;
				height: 120rpx;
				background: #E6E6E6;
				border-radius: 10rpx;
			}

			.goods-details {
				flex: 1;
				height: 120rpx;

				.details-t {
					font-weight: 500;
					font-size: 28rpx;
					color: #2A2A2A;
				}

				.details-c {
					.num {
						font-weight: 400;
						font-size: 26rpx;
						color: #A2A2A2;
						text-align: right;
					}
				}

				.details-b {
					.original {
						font-weight: 400;
						font-size: 22rpx;
						color: #7E7E7E;
						text-align: right;
					}
				}
			}
		}

		.refund-num {
			height: 93rpx;
			border-top: 1rpx solid #EAEAEA;
			border-bottom: 1rpx solid #EAEAEA;

			.left {
				font-weight: 400;
				font-size: 28rpx;
				color: #373737;

				text {
					color: #B0B0B0;
				}
			}

			.num {
				font-weight: 400;
				font-size: 26rpx;
				color: #282828;
				margin: 0 20rpx;
			}

			.num-image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}

		.refund-money {
			font-weight: 400;
			font-size: 28rpx;
			color: #373737;

			text {
				font-weight: 500;
				color: #35C7A8;
			}
		}
	}

	.reason {
		width: 100%;
		height: 275rpx;
		background: #FFFFFF;

		.reason-title {
			height: 88rpx;

			.title {
				font-weight: 400;
				font-size: 28rpx;
				color: #373737;
			}
		}

		.reason-list {
			border-top: 1rpx solid #EAEAEA;

			.reason-item {
				height: 68rpx;
				border-radius: 6rpx;
				border: 2rpx solid #E4E4E4;
				font-weight: 400;
				font-size: 24rpx;
				color: #5C5C5C;
				line-height: 68rpx;
				margin: 0 10rpx 10rpx 0;
			}
		}

		.textarea {
			width: 100%;
			border-top: 1rpx solid #EAEAEA;
			padding: 20rpx 0;
			height: 180rpx;
			position: relative;

			textarea {
				width: 100%;
				height: 100%;
				font-weight: 400;
				font-size: 24rpx;
			}

			.length {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #CBCBCB;
			}
		}
	}

	.refund-tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #7D7D7D;
	}

	.refund-btn {
		width: 702rpx;
		height: 80rpx;
		background: #35C7A8;
		border-radius: 40rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 50rpx auto 0;
	}

	.go-info {
		.go-text {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #2A2A2A;
		}
	}
</style>